<template>
    <div>
        <div class="search-term">
            <el-form :inline="true" :model="searchInfo" class="demo-form-inline">
                <el-form-item>
                    <el-input
                            placeholder="请输入课程名称"
                            v-model="searchInfo.courseName"
                            clearable
                            size="small"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="onSubmit" type="primary" size="mini"
                    >搜 索
                    </el-button
                    >
                </el-form-item>
            </el-form>
        </div>
        <el-table :data="tableData" style="width: 100%;margin-bottom: 10px;" border>
            <el-table-column prop="courseName" label="课程名称" align="center">
            </el-table-column>
            <el-table-column prop="courseClassifi" label="课程分类" align="center">
                <template slot-scope="scope">
                    {{ filterCourse(scope.row.courseClassifi) }}
                </template>
            </el-table-column>
            <el-table-column
                    prop="courseCategoryName"
                    label="课程类目"
                    align="center"
            >
            </el-table-column>
            <el-table-column prop="courseLevel" label="课程级别" align="center">
                <template slot-scope="scope">
                    {{ filterLevel(scope.row.courseLevel) }}
                </template>
            </el-table-column>
            <el-table-column prop="courseHourCount" label="课时" align="center">
            </el-table-column>
            <el-table-column prop="courseHourPrice" label="单价" align="center">
            </el-table-column>
            <el-table-column prop="courseCreateName" label="学校/机构名称" align="center" v-if="searchInfo.currentRoleId===1||searchInfo.currentRoleId===2">
            </el-table-column>
            <el-table-column prop="orgNo" label="机构编号" align="center">
            </el-table-column>
            <el-table-column fixed="right" label="操作" align="center" width="200">
                <template slot-scope="scope">
                    <!--查看按钮显示规则:配置权限与课程状态为审批中/审批成功-->
                    <el-button
                            @click="viewArea(scope.row)"
                            size="mini"
                            type="primary"
                            icon="el-icon-view"
                            v-if="btns.includes('view')">查 看
                    </el-button>
                    <el-button
                            @click="removeLibrary(scope.row)"
                            size="mini"
                            type="danger"
                            icon="el-icon-delete"
                    >移 除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                :current-page="currPage"
                :page-size="pageSize"
                :page-sizes="[10, 20, 30, 50, 100]"
                :style="{ float: 'right', padding: '20px' }"
                :total="totalCount"
                @current-change="handlepageChange"
                @size-change="handleSizeChange"
                layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>

        <el-dialog
                :before-close="closeDialog"
                title="查看课程"
                :visible.sync="dialogFormVisible"
                class="dialogs"
        >
            <el-tabs v-model="activeName" >
                <el-tab-pane label="课程详情" name="first">
                    <el-form
                            :model="form"
                            :inline="true"
                            :rules="rules"
                            label-width="80px"
                            ref="areaForm"
                    >
                        <el-form-item label="封面" prop="courseImg" class="pics">
                            <el-upload
                                    :disabled="true"
                                    class="avatar-uploader"
                                    :action="`${path}/api-system/file/upload/course`"
                                    list-type="picture-card"
                                    :show-file-list="false"
                            >
                                <div class="header-background">
                                    <img v-if="form.courseImg" :src="form.courseImg" class="avatar" width="100%"
                                         height="100%"/>
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i></div>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label="课程名称" prop="courseName">
                            <el-input
                                    :disabled="true"
                                    autocomplete="off"
                                    v-model="form.courseName"
                                    size="small"
                                    placeholder="请输入课程名称"
                                    clearable
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="课程分类" prop="courseClassifi">
                            <el-select
                                    :disabled="true"
                                    v-model="form.courseClassifi"
                                    placeholder="请选择课程分类"
                                    size="small"
                                    clearable
                            >
                                <el-option
                                        v-for="item in courseSortOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <!-- :show-all-levels="false" -->
                        <el-form-item label="课程类目" prop="courseCategoryId">
                            <el-cascader
                                    :disabled="true"
                                    v-model="form.courseCategoryId"
                                    size="small"
                                    :placeholder="form.courseCategoryName"
                            ></el-cascader>
                        </el-form-item>
                        <el-form-item label="适用年级" prop="courseGrade">
                            <el-select
                                    :disabled="true"
                                    v-model="form.courseGrade"
                                    multiple
                                    placeholder="请选择适用年级"
                                    size="small"
                                    clearable
                            >
                                <el-option
                                        v-for="item in gradesOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="课程级别" prop="courseLevel">
                            <el-select
                                    :disabled="true"
                                    v-model="form.courseLevel"
                                    placeholder="请选择课程级别"
                                    size="small"
                                    clearable
                            >
                                <el-option
                                        v-for="item in courseLevelOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="课时数" prop="courseHourCount">
                            <el-input
                                    :disabled="true"
                                    oninput="value=value.replace(/[^\d]/g,'')"
                                    autocomplete="off"
                                    v-model="form.courseHourCount"
                                    size="small"
                                    placeholder="请输入课时数"
                                    clearable
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="课时单价" prop="courseHourPrice">
                            <el-input
                                    :disabled="true"
                                    oninput="value=value.replace(/[^0-9.]/g,'')"
                                    autocomplete="off"
                                    v-model="form.courseHourPrice"
                                    size="small"
                                    placeholder="请输入课时单价"
                                    clearable
                            ></el-input>
                        </el-form-item>
                        <el-form-item
                                label="是否包含教材/教具"
                                prop="containMaterialFlag"
                                class="item-label"
                        >
                            <el-select
                                    :disabled="true"
                                    v-model="form.containMaterialFlag"
                                    placeholder="请选择是否包含教材/教具"
                                    size="small"
                                    clearable
                            >
                                <el-option
                                        v-for="item in statusOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item
                                label="教材/教具名称"
                                prop="courseMaterialName  "
                                v-if="form.containMaterialFlag === 1"
                                class="item-label"
                        >
                            <el-input
                                    :disabled="true"
                                    autocomplete="off"
                                    v-model="form.courseMaterialName"
                                    size="small"
                                    placeholder="请输入教材/教具名称"
                                    clearable
                            ></el-input>
                        </el-form-item>
                        <el-form-item
                                label="教材/教具价格"
                                prop="courseMaterialPrice"
                                v-if="form.containMaterialFlag === 1"
                                class="item-label"
                        >
                            <el-input
                                    :disabled="true"
                                    oninput="value=value.replace(/[^0-9.]/g,'')"
                                    autocomplete="off"
                                    v-model="form.courseMaterialPrice"
                                    size="small"
                                    placeholder="请输入教材/教具价格"
                                    clearable
                            ></el-input>
                        </el-form-item>
                        <el-form-item
                                label="是否必须购买"
                                prop="requireBuyFlag"
                                v-if="form.containMaterialFlag === 1"
                                class="item-label"
                        >
                            <el-select
                                    :disabled="true"
                                    v-model="form.requireBuyFlag"
                                    placeholder="是否必须购买"
                                    size="small"
                                    clearable
                            >
                                <el-option
                                        v-for="item in statusOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item
                                label="课程介绍"
                                prop="courseIntroduce"
                                class="pics"
                        >
                            <el-input
                                    autocomplete="off"
                                    v-model="form.courseIntroduce"
                                    size="small"
                                    clearable
                                    type="textarea"
                                    rows="2"
                                    :disabled="true"
                            ></el-input>
                        </el-form-item>
                        <el-form-item
                                label="场地要求"
                                prop="courseSiteRequirements"
                                class="pics"
                        >
                            <el-input
                                    :disabled="true"
                                    label="课程介绍"
                                    autocomplete="off"
                                    v-model="form.courseSiteRequirements"
                                    size="small"
                                    clearable
                                    type="textarea"
                                    :rows="2"
                            ></el-input>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="课程目录" name="second">
                    <div class="contents">
                        <el-form
                                :model="{ courseContentList }"
                                ref="ruleForm"
                                label-width="100px"
                        >
                            <div
                                    v-for="(item, index) in courseContentList"
                                    :key="index"
                                    class="con-list"
                            >
                                <el-form-item label="课节标题">
                                    <el-input v-model="item.lessonsTitle" :disabled="true"></el-input>
                                </el-form-item>
                                <el-form-item label="课节内容">
                                    <el-input
                                            :disabled="true"
                                            type="textarea"
                                            :rows="3"
                                            placeholder=""
                                            v-model="item.lessonsContent"
                                    >
                                    </el-input>
                                </el-form-item>
                            </div>
                        </el-form>
                    </div>
                </el-tab-pane>
            </el-tabs>
            <div class="dialog-footer" slot="footer" style="margin-top:30px;">
                <el-button @click="closeDialog" size="mini">取 消</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    // 获取列表内容封装在mixins内部  getTableData方法 初始化已封装完成 条件搜索时候 请把条件安好后台定制的结构体字段 放到 this.searchInfo 中即可实现条件搜索
    import {mapGetters} from "vuex";
    import {courseDetail, courseLibraryList, removeCourseLibrary} from "@/api/course";
    import infoList from "@/components/mixins/infoList";

    export default {
        name: "course",
        mixins: [infoList],
        data() {
            return {
                activeName: "first",
                statusOptions: [
                    {
                        value: 0,
                        label: "否",
                    },
                    {
                        value: 1,
                        label: "是",
                    },
                ],
                courseSortOptions: [
                    {
                        value: 0,
                        label: "素质课",
                    },
                    {
                        value: 1,
                        label: "社团课",
                    },
                    {
                        value: 2,
                        label: "托管班",
                    },
                ],
                courseLevelOptions: [
                    {
                        value: 0,
                        label: "基础",
                    },
                    {
                        value: 1,
                        label: "进阶",
                    },
                    {
                        value: 2,
                        label: "高级",
                    },
                ],
                gradesOptions: [
                    {
                        value: 1,
                        label: "一年级",
                    },
                    {
                        value: 2,
                        label: "二年级",
                    },
                    {
                        value: 3,
                        label: "三年级",
                    },
                    {
                        value: 4,
                        label: "四年级",
                    },
                    {
                        value: 5,
                        label: "五年级",
                    },
                    {
                        value: 6,
                        label: "六年级",
                    },
                ],
                searchInfo: {courseName: '',currentRoleId: 0},
                listApi: courseLibraryList,
                path: process.env.VUE_APP_BASE_API,
                dialogFormVisible: false,
                form: {},
                courseContentList: [],
                rules: {
                    courseName: [
                        {required: true, message: "请输入课程名称", trigger: "blur"},
                    ],
                    courseClassifi: [
                        {required: true, message: "请选择课程分类", trigger: "blur"},
                    ],
                    courseCategoryId: [
                        {required: true, message: "请选择课程类目", trigger: "blur"},
                    ],
                    courseGrade: [
                        {required: true, message: "请选择适用年级", trigger: "blur"},
                    ],
                    courseLevel: [
                        {required: true, message: "请选择课程级别", trigger: "blur"},
                    ],
                    courseHourCount: [
                        {required: true, message: "请输入课时数", trigger: "blur"},
                    ],
                    courseHourPrice: [
                        {required: true, message: "请输入课单价", trigger: "blur"},
                    ]
                }
            };
        },
        computed: {
            ...mapGetters("user", ["userInfo", "token"]),
        },
        methods: {
            fliterColor(val) {
                switch (val) {
                    case 0:
                        return 'info'
                        break;
                    case 1:
                        return 'warning'
                        break;
                    case 2:
                        return 'danger'
                        break;
                    case 3:
                        return 'success'
                        break;
                    default:
                        break;
                }
            },
            filterCourseWeek(val) {
                switch (val) {
                    case 1:
                        return '星期一'
                        break;
                    case 2:
                        return '星期二'
                        break;
                    case 3:
                        return '星期三'
                        break;
                    case 4:
                        return '星期四'
                        break;
                    case 5:
                        return '星期五'
                        break;
                    case 6:
                        return '星期六'
                        break;
                    case 7:
                        return '星期日'
                        break;
                    default:
                        break;
                }
            },
            filterCourseGrade(val) {
                switch (val) {
                    case 1:
                        return '一年级'
                        break;
                    case 2:
                        return '二年级'
                        break;
                    case 3:
                        return '三年级'
                        break;
                    case 4:
                        return '四年级'
                        break;
                    case 5:
                        return '五年级'
                        break;
                    case 6:
                        return '六年级'
                        break;
                    default:
                        break;
                }
            },
            handles(val) {
                if (val === undefined) {
                    return;
                }
                let one = val[0];
                let tow = val[1];
                let three = val[2];
                let newCourseCategoryName = "";
                this.options.forEach((item) => {
                    //一级
                    if (one === item.categoryId) {
                        newCourseCategoryName = item.categoryName + "/"
                        item.childList.forEach((item1) => {
                            //二级
                            if (tow === item1.categoryId) {
                                newCourseCategoryName += item1.categoryName + "/"
                                item1.childList.forEach((item2) => {
                                    //三级
                                    if (three === item2.categoryId) {
                                        newCourseCategoryName += item2.categoryName

                                    }
                                });
                            }
                        });
                    }
                });
                this.form.courseCategoryName = newCourseCategoryName
            },
            // 课程分类
            filterCourse(val) {
                switch (val) {
                    case 0:
                        return "素质课";

                    case 1:
                        return "社团课";

                    case 2:
                        return "托管班";

                    default:
                        break;
                }
            },
            //级别
            filterLevel(val) {
                switch (val) {
                    case 0:
                        return "基础";

                    case 1:
                        return "进阶";

                    case 2:
                        return "高级";

                    default:
                        break;
                }
            },
            //条件搜索前端看此方法
            onSubmit() {
                this.page = 1;
                this.pageSize = 10;
                this.getTableData();
            },
            initForm() {
                this.$refs.areaForm.resetFields();
                this.form = {};
            },
            closeDialog() {
                this.initForm();
                this.dialogFormVisible = false;
            },
            openDialog() {
                this.dialogFormVisible = true;
            },
            //获取教师
            async getTeacher() {
                const res = await simpleTeacherList()
                this.teacherListOptions = res.data
            },
            async viewArea(row) {
                const res = await courseDetail(row.courseId);
                this.form = res.data;
                this.courseContentList=res.data.courseContentList;
                this.openDialog("view");
            },
            //移除课程库
            async removeLibrary(row) {
                this.$confirm("此操作将移除课程, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(async () => {
                        const res = await removeCourseLibrary(row.libraryId);
                        if (res.statusCode === 0) {
                            this.$message({
                                type: "success",
                                message: "提交成功",
                                showClose: true,
                            });
                        }
                        this.getTableData();
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消移除",
                        });
                    });
            },

        },
        async created() {
            this.getTableData();
            this.btns = this.$route.meta.btnList
            this.searchInfo.currentRoleId = this.userInfo.roleId;
        }
    }
</script>
<style scoped lang="scss">
    .green {
        color: #67c23a;
    }

    .red {
        color: #f56c6c;
    }

    .button-box {
        // padding: 10px 20px;
        .el-button {
            float: right;
        }
    }

    .el-tag--mini {
        margin-left: 5px;
    }

    .dialogs {
        ::v-deep .el-input-group--append .el-input__inner {
            width: 170px !important;
        }

        ::v-deep .el-dialog__body {
            padding: 15px 20px 10px 20px;
        }

        ::v-deep .el-input__inner {
            width: 225px;
        }

        ::v-deep .el-textarea__inner {
            width: 225px;
        }

        .dialog-footer {
            text-align: center;
        }

        ::v-deep .el-input-number .el-input__inner {
            width: 130px;
        }

        ::v-deep .el-form .el-form-item {
            width: 49%;
            margin: 0;
            margin-bottom: 22px;
        }

        ::v-deep .el-form .pics {
            width: 100%;
            margin-bottom: 22px;
        }

        ::v-deep .el-form .small_pic {
            .el-upload--picture-card {
                height: 80px;
                width: 80px;
                line-height: 80px;
            }
        }

        .pics {
            ::v-deep .el-form-item__content {
                width: calc(100% - 112px);
            }
        }

        .el-form .pics ::v-deep .el-form-item__content .el-textarea__inner {
            width: 100%;
        }

        .item-label {
            ::v-deep .el-form-item__label {
                width: 142px !important;
            }

            ::v-deep .el-input__inner {
                width: 162px;
            }
        }
    }

    .contents {
        // position: relative;
        ::v-deep .el-form-item__content .el-textarea__inner {
            width: 100%;
        }

        ::v-deep .el-input__inner {
            width: 100%;
        }

        ::v-deep .el-form .el-form-item {
            width: 80%;
            margin: 0;
            margin-bottom: 22px;
        }
    }

    .addBtn {
        text-align: right;
    }

    .con-list {
        position: relative;

        .delBtn {
            position: absolute;
            top: 50%;
            right: 20px;
            transform: translate(-50%, -50%);
        }
    }

    .places {
        ::v-deep .el-input input::-webkit-input-placeholder {
            color: #606266;
        }

        ::v-deep .el-input input::-moz-placeholder {
            color: #606266;
        }

        ::v-deep .el-input input:-moz-placeholder {

            color: #606266;
        }

        ::v-deep .el-input input:-ms-input-placeholder {
            color: #606266;
        }
    }

    .header-background {
        position: absolute;
        width: 146px;
        height: 146px;
    }
</style>
